import {BaseThree} from "../base/BaseThree";
import * as THREE from 'three'

export class AddTest extends BaseThree {
  constructor( view, pos) {
    super(view,pos)
  }
  setup(pos) {
    pos = this.toRenderCoordinates(pos);
    console.log(pos);
    let {scene} = this;
   // 创建一个组表示所有的雨滴
    var group = new THREE.Group();
    var textureTree = new THREE.TextureLoader().load("./static/images/threejs66rain.png");
// 批量创建雨滴精灵模型
    for (let i = 0; i < 400; i++) {
      var spriteMaterial = new THREE.SpriteMaterial({map:textureTree,//设置精灵纹理贴图
      });
      // 创建精灵模型对象
      var sprite = new THREE.Sprite(spriteMaterial);
      scene.add(sprite);
      // 控制精灵大小,
      sprite.scale.set(8, 10, 1); //// 只需要设置x、y两个分量就可以
      var k1 = Math.random() - 0.5;
      var k2 = Math.random();
      var k3 = Math.random() - 0.5;
      // 设置精灵模型位置，在整个空间上上随机分布
      sprite.position.set(pos[0]+2000 * k1, pos[1]+2000*k3, 1000 * k2)
      group.add(sprite);
    }
    scene.add(group);//雨滴群组插入场景中
    let that = this;
    function render() {
      // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms
      // 每次渲染都会更新雨滴的位置，进而产生动画效果
      group.children.forEach(sprite => {
        // 雨滴的y坐标每次减1
        sprite.position.z-= 1;
        if (sprite.position.z < 0) {
          // 如果雨滴落到地面，重置y，从新下落
          sprite.position.z = 200;
        }
      });
      that.initRender();
      requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
    }

  render();
  }

}

